<template>
  <div id="app">
    <div class="layer">
      <div class="img-box" id="img-box">
          <img v-for="(img,idx) in img_list" :key="idx" :src="img" alt="">
      </div>
      <ul>
          <li v-for="(el,idx) in img_num" :key="idx" :class="{'active':idx == current_id}" @click="change(idx)">{{el}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
        return {
            img_list:["img/l1.jpg","img/l2.webp","img/l3.webp","img/l4.webp","img/l5.webp"],
            img_num:[],
            current_id:0
        }
    },
    mounted:function(){
      this.load();
    },
    methods:{
        load(){
            var len = this.img_list.length;
            if(len > 0){
                for(var i=1;i<=len;i++){
                    this.img_num.push(i);
                }
            }
        },
        change(num){
            this.current_id = num;
            var obj = document.getElementById("img-box");
            obj.style.marginLeft = -num * 1200 + 'px';
        }
    }
}
</script>

<style>
  *{
      padding: 0;
      margin: 0;
  }
  .layer{
      position: relative;
      width: 1200px;
      height: 460px;
      margin:auto;
      border:1px solid red;
      overflow: hidden;
  }
  .layer img{
      display:block;
      width: 1200px;
      height: 460px;
      float: left;
  }
  .img-box{
      height: 460px;
      width:6000px;
      overflow: hidden;
      transition:margin-left 2s;
  }
  ul{
      position: absolute;
      right:10px;
      bottom:10px;
      overflow: hidden;
  }
  ul li{
      list-style:none;
      width: 30px;
      height: 30px;
      font-size: 15px;
      border:1px solid #dedede;
      float: left;
      margin:5px;
      text-align:center;
      line-height: 30px;
      cursor: pointer;
      background-color:rgba(0,0,0,0.3);
      color:red;
  }
  .active{
      background-color:#fff;
      color:#333;
  }
</style>
